<!-- 多选页面 -->

<template>
	<watermark>
		<view class="container">
			<z-paging :auto="false" ref="paging" v-model="dataList" loading-more-no-more-text="暂无更多数据"
				@query="queryList">
				<view slot="top" v-show="showSelectItem" name='fade' style="padding: 1rem 0px 0px;">
					<view class="v-row">
						<view class="t-title">名称</view>
						<view class="t-content">
							<input class="i-content" type="text" placeholder="请输入名称" v-model="equipment.name" />
						</view>
					</view>
				</view>

				<view slot="top" class="commit_btn" style="margin-top: 20px;text-align: center;">
					<button @click="select()" style="width: 50%;height: 1.6rem;"
						size="mini">{{showSelectItem?'搜索':'刷新'}}
					</button>
					<button @click="handlerSelectMore()" class="btn-select" size="mini">{{showSelectItem?'关闭':'检索'}}
					</button>
				</view>

				<view class="v-row">
					<view class="t-title">已选数据：</view>
					<view class="content-select" style="margin-right: 0px;margin-left: 10px;">
						<view>{{nameStr()}}</view>
					</view>
				</view>
				<view class="item" style="margin-left: 16rpx;padding-right: 1rem" v-for="(item,index) in dataList"
					:key="index" @click="checkItem(item)">
					<view>
						<checkbox style="width: 30px;height: 30px;" :checked="item.checked"></checkbox>
						{{ item.name }} {{item.value?' ( '+item.value+' )':''}}
					</view>
					<text>{{item.otherInfo}}</text>
				</view>
				<button class="btn-confirm" slot='bottom' @click="confirm()">确认</button>
			</z-paging>
		</view>
	</watermark>
</template>

<script>

	import requestUtils from '@/common/utils/requestUtils.js'
	import commonConstants from '@/common/constants/commonConstants.js'
	//选择用户多选
	export default {
		data() {
			return {
				dataList: [],
				checkList: [],
				showSelectItem: true,
				equipment: {
					"name": "",
					"text": "",
					"value": "",
				},
				param: {},
				url: ''
			}
		},
		methods: {
			handlerSelectMore() {
				this.showSelectItem = !this.showSelectItem
			},
			select() {
				this.$refs.paging.reload();
			},
			nameStr() {
				var nameStr = "";
				this.checkList.forEach((item) => {
					nameStr = nameStr + item.name + ' '
				})
				return nameStr;
			},
			checkItem(item) {
				item.checked = !item.checked
				if (item.checked) {
					for (var i = 0; i < this.checkList.length; i++) {
						if (this.checkList[i].value == item.value) {
							return;
						}
					}
					this.checkList.push(item)
				} else {
					for (var i = 0; i < this.checkList.length; i++) {
						if (this.checkList[i].value == item.value) {
							this.checkList.splice(i, 1);
							return;
						}
					}
				}
			},
			confirm() {
				// #ifdef APP-NVUE
				const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
				// #endif
				// #ifndef APP-NVUE
				const eventChannel = this.getOpenerEventChannel();
				// #endif
				eventChannel.emit('getSelect', {
					list: this.checkList
				});
				uni.navigateBack()
			},
			queryList(pageNo, pageSize) {
				let that = this
				this.param.name = this.equipment.name
				console.log("触发页面刷新");
				if (this.forPager) {

					requestUtils.getListByPager(this.url, this.param, {
						page: pageNo,
						limit: pageSize * 3
					}, (result) => {
						console.log(result);
						if (result.data.rows) {
							let list = that.chekedOldData(result.data.rows)
							that.$refs.paging.complete(list);
						}
					}, (error) => {
						that.pagingError(error)

					})

				} else {
					requestUtils.getListByCondition(this.url, this.param, (result) => {
						let list = this.chekedOldData(result.list)
						console.log(that.$refs);
						that.$refs.paging.complete(list);
					}, (error) => {
						that.pagingError(error)
					})
				}
			},
			chekedOldData(list) {
				list.forEach(item => {
					item.checked = false
					this.oldData?.forEach(it => {
						if (it.value == item.value) {
							item.checked = true
							this.checkList.push(item)
						}
					})
				})
				return list
			},
			pagingError(error) {
				this.$refs.paging.complete(false);
				uni.showModal({
					content: error.msg,
					showCancel: false
				});
			}

		},
		onLoad(data) {
			let that = this
			uni.$on("requestData", (res) => {
				console.log("收到消息",res);
				let data = JSON.parse(res)
				that.url = data.url
				that.param = data.param
				that.forPager = data.forPager
				that.oldData = data.oldData
				that.queryList(0,10)
				// setTimeout(() => {
				// 	that.$refs.paging.reload();
				// }, 200)
			})
		},
		onHide() {
			uni.$off("requestData")
		}


	}
</script>

<style>
	@import url("@/pages/general/general.css");

	.t-content {
		flex: 1;
		margin-left: 10px;
	}

	.btn-select {
		width: 30%;
		height: 1.6rem;
		margin-left: 0.6rem;
		background-color: #fff;
		border: 1rpx solid #1E6AD3;
		color: #1E6AD3;
	}

	.btn-confirm {
		background: #1E6AD3;
		border-radius: 10rpx;
		color: #fff;
		margin: 10px auto;
		width: 70%;
	}

	.v-right {
		display: flex;
		align-items: center;
		padding: 5px 1rem 5px 0.5rem
	}
</style>